<template>
  <div class="knowledge-base">
    <!-- 页面头部 -->
    <div class="page-header">
      <h1>防诈骗知识库</h1>
      <p>学习防诈骗知识，提高安全防范意识</p>
    </div>

    <!-- 搜索区域 -->
    <div class="search-section">
      <div class="search-box">
        <input type="text" v-model="searchQuery" placeholder="搜索防诈骗知识...">
        <button @click="searchKnowledge" class="search-btn">
          <i class="icon">🔍</i>
          搜索
        </button>
      </div>
      <div class="quick-links">
        <span>热门搜索：</span>
        <button v-for="tag in hotTags" :key="tag" @click="searchByTag(tag)" class="tag-btn">
          {{ tag }}
        </button>
      </div>
    </div>

    <!-- 知识分类 -->
    <div class="knowledge-categories">
      <h3>知识分类</h3>
      <div class="category-grid">
        <div v-for="category in categories" :key="category.id" 
             @click="selectCategory(category)" 
             :class="{ active: selectedCategory === category.id }"
             class="category-card">
          <div class="category-icon">{{ category.icon }}</div>
          <div class="category-info">
            <h4>{{ category.name }}</h4>
            <p>{{ category.description }}</p>
            <div class="category-stats">
              <span class="article-count">{{ category.articleCount }} 篇文章</span>
              <span class="read-count">{{ category.readCount }} 次阅读</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 知识内容 -->
    <div class="knowledge-content">
      <div class="content-header">
        <h3>{{ getCategoryName(selectedCategory) }}</h3>
        <div class="content-filters">
          <select v-model="sortBy">
            <option value="latest">最新发布</option>
            <option value="popular">最受欢迎</option>
            <option value="important">重要程度</option>
          </select>
        </div>
      </div>

      <div class="articles-grid">
        <div v-for="article in filteredArticles" :key="article.id" class="article-card">
          <div class="article-header">
            <div class="article-meta">
              <span class="category-tag">{{ article.category }}</span>
              <span class="importance" :class="article.importance">{{ article.importance }}</span>
            </div>
            <div class="article-date">{{ article.date }}</div>
          </div>
          <div class="article-content">
            <h4>{{ article.title }}</h4>
            <p>{{ article.summary }}</p>
            <div class="article-tags">
              <span v-for="tag in article.tags" :key="tag" class="tag">{{ tag }}</span>
            </div>
          </div>
          <div class="article-actions">
            <button @click="readArticle(article)" class="read-btn">阅读全文</button>
            <div class="article-stats">
              <span class="read-count">👀 {{ article.readCount }}</span>
              <span class="like-count">👍 {{ article.likeCount }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 常见问题 -->
    <div class="faq-section">
      <h3>常见问题</h3>
      <div class="faq-list">
        <div v-for="faq in faqList" :key="faq.id" class="faq-item">
          <div class="faq-question" @click="toggleFAQ(faq.id)">
            <h4>{{ faq.question }}</h4>
            <span class="toggle-icon" :class="{ active: faq.expanded }">▼</span>
          </div>
          <div v-show="faq.expanded" class="faq-answer">
            <p>{{ faq.answer }}</p>
            <div v-if="faq.tips" class="faq-tips">
              <h5>相关建议：</h5>
              <ul>
                <li v-for="tip in faq.tips" :key="tip">{{ tip }}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 防护技巧 -->
    <div class="protection-tips">
      <h3>防护技巧</h3>
      <div class="tips-grid">
        <div v-for="tip in protectionTips" :key="tip.id" class="tip-card">
          <div class="tip-icon">{{ tip.icon }}</div>
          <div class="tip-content">
            <h4>{{ tip.title }}</h4>
            <p>{{ tip.description }}</p>
            <div class="tip-steps">
              <h5>操作步骤：</h5>
              <ol>
                <li v-for="step in tip.steps" :key="step">{{ step }}</li>
              </ol>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 知识测试 -->
    <div class="knowledge-quiz">
      <h3>知识测试</h3>
      <div class="quiz-intro">
        <p>通过小测试检验你的防诈骗知识掌握程度</p>
        <button @click="startQuiz" class="quiz-btn">开始测试</button>
      </div>
      
      <div v-if="quizStarted" class="quiz-content">
        <div class="quiz-progress">
          <div class="progress-bar">
            <div class="progress-fill" :style="{ width: (currentQuizIndex / quizQuestions.length) * 100 + '%' }"></div>
          </div>
          <span class="progress-text">{{ currentQuizIndex + 1 }} / {{ quizQuestions.length }}</span>
        </div>
        
        <div v-if="currentQuestion" class="quiz-question">
          <h4>{{ currentQuestion.question }}</h4>
          <div class="quiz-options">
            <label v-for="option in currentQuestion.options" :key="option.id">
              <input type="radio" :name="'question-' + currentQuestion.id" :value="option.id" v-model="selectedAnswer">
              {{ option.text }}
            </label>
          </div>
          
          <div class="quiz-actions">
            <button v-if="currentQuizIndex > 0" @click="previousQuestion" class="nav-btn">上一题</button>
            <button v-if="currentQuizIndex < quizQuestions.length - 1" @click="nextQuestion" :disabled="!selectedAnswer" class="nav-btn primary">下一题</button>
            <button v-if="currentQuizIndex === quizQuestions.length - 1" @click="finishQuiz" :disabled="!selectedAnswer" class="nav-btn primary">完成测试</button>
          </div>
        </div>
      </div>
      
      <div v-if="quizFinished" class="quiz-result">
        <h4>测试结果</h4>
        <div class="result-score">
          <div class="score-circle">
            <div class="score-value">{{ quizScore }}</div>
            <div class="score-label">分</div>
          </div>
          <div class="score-analysis">
            <p>{{ getScoreAnalysis(quizScore) }}</p>
          </div>
        </div>
        <button @click="retakeQuiz" class="retake-btn">重新测试</button>
      </div>
    </div>

    <!-- 最新更新 -->
    <div class="latest-updates">
      <h3>最新更新</h3>
      <div class="update-list">
        <div v-for="update in latestUpdates" :key="update.id" class="update-item">
          <div class="update-date">{{ update.date }}</div>
          <div class="update-content">
            <h4>{{ update.title }}</h4>
            <p>{{ update.description }}</p>
            <span class="update-type">{{ update.type }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 响应式数据
const searchQuery = ref('')
const selectedCategory = ref('all')
const sortBy = ref('latest')
const quizStarted = ref(false)
const quizFinished = ref(false)
const currentQuizIndex = ref(0)
const selectedAnswer = ref('')
const quizScore = ref(0)
const userAnswers = ref([])

// 热门搜索标签
const hotTags = ref(['电信诈骗', '网络安全', '投资理财', '个人信息', '防护技巧'])

// 知识分类
const categories = ref([
  {
    id: 'all',
    name: '全部分类',
    icon: '📚',
    description: '查看所有防诈骗知识',
    articleCount: 156,
    readCount: 12500
  },
  {
    id: 'telecom',
    name: '电信诈骗',
    icon: '📞',
    description: '电话、短信类诈骗防范',
    articleCount: 45,
    readCount: 5200
  },
  {
    id: 'online',
    name: '网络诈骗',
    icon: '💻',
    description: '网络平台诈骗识别',
    articleCount: 38,
    readCount: 4800
  },
  {
    id: 'financial',
    name: '金融诈骗',
    icon: '💰',
    description: '投资理财类诈骗',
    articleCount: 32,
    readCount: 3900
  },
  {
    id: 'personal',
    name: '个人信息',
    icon: '🔒',
    description: '个人信息保护',
    articleCount: 28,
    readCount: 3200
  },
  {
    id: 'emergency',
    name: '应急处理',
    icon: '🚨',
    description: '被骗后的应急措施',
    articleCount: 13,
    readCount: 1400
  }
])

// 文章数据
const articles = ref([
  {
    id: 1,
    title: '如何识别冒充银行客服的诈骗电话',
    summary: '详细介绍银行客服诈骗的常见手法，以及如何有效识别和防范。',
    category: '电信诈骗',
    categoryId: 'telecom',
    importance: '高',
    date: '2024-01-15',
    readCount: 1520,
    likeCount: 89,
    tags: ['银行', '客服', '电话诈骗']
  },
  {
    id: 2,
    title: '网络购物安全指南',
    summary: '在线购物时如何保护个人信息，避免遭受网络购物诈骗。',
    category: '网络诈骗',
    categoryId: 'online',
    importance: '中',
    date: '2024-01-14',
    readCount: 987,
    likeCount: 64,
    tags: ['网购', '安全', '个人信息']
  },
  {
    id: 3,
    title: '投资理财诈骗的识别要点',
    summary: '高收益投资项目的风险识别，如何避免投资理财诈骗。',
    category: '金融诈骗',
    categoryId: 'financial',
    importance: '高',
    date: '2024-01-13',
    readCount: 1340,
    likeCount: 102,
    tags: ['投资', '理财', '高收益']
  },
  {
    id: 4,
    title: '个人信息泄露的防范措施',
    summary: '如何在日常生活中保护个人敏感信息，防止信息泄露。',
    category: '个人信息',
    categoryId: 'personal',
    importance: '中',
    date: '2024-01-12',
    readCount: 756,
    likeCount: 45,
    tags: ['个人信息', '隐私保护', '数据安全']
  },
  {
    id: 5,
    title: '被骗后的紧急处理步骤',
    summary: '发现被骗后应该立即采取的措施，减少损失的方法。',
    category: '应急处理',
    categoryId: 'emergency',
    importance: '高',
    date: '2024-01-11',
    readCount: 892,
    likeCount: 78,
    tags: ['应急处理', '报警', '止损']
  }
])

// 常见问题
const faqList = ref([
  {
    id: 1,
    question: '如何判断一个电话是否为诈骗电话？',
    answer: '诈骗电话通常有以下特征：主动询问个人敏感信息、要求立即转账、声称账户异常、使用威胁语言等。',
    tips: ['不要轻信陌生来电', '通过官方渠道核实', '不要透露个人信息', '遇到可疑情况立即挂断'],
    expanded: false
  },
  {
    id: 2,
    question: '网络购物时如何保护个人信息？',
    answer: '选择正规购物平台，使用安全的支付方式，不要在公共网络环境下进行购物，定期更换密码。',
    tips: ['选择知名电商平台', '使用第三方支付', '避免公共WiFi购物', '设置复杂密码'],
    expanded: false
  },
  {
    id: 3,
    question: '投资理财时应该注意什么？',
    answer: '投资前要充分了解项目风险，不要相信高收益零风险的承诺，选择正规金融机构，分散投资风险。',
    tips: ['了解投资风险', '选择正规机构', '分散投资', '理性投资'],
    expanded: false
  },
  {
    id: 4,
    question: '被骗后应该怎么办？',
    answer: '立即停止所有操作，保存相关证据，第一时间报警，联系银行冻结账户，寻求专业帮助。',
    tips: ['立即报警', '保存证据', '冻结账户', '寻求帮助'],
    expanded: false
  }
])

// 防护技巧
const protectionTips = ref([
  {
    id: 1,
    icon: '🛡️',
    title: '电话诈骗防护',
    description: '如何有效防范电话诈骗，保护个人财产安全。',
    steps: [
      '不要轻信陌生来电',
      '不要透露个人敏感信息',
      '通过官方渠道核实身份',
      '遇到可疑情况立即挂断',
      '及时举报诈骗电话'
    ]
  },
  {
    id: 2,
    icon: '💻',
    title: '网络安全防护',
    description: '在网络环境中保护个人信息和财产安全。',
    steps: [
      '使用强密码并定期更换',
      '不要在公共WiFi进行敏感操作',
      '谨慎点击不明链接',
      '及时更新软件和系统',
      '使用正规防护软件'
    ]
  },
  {
    id: 3,
    icon: '💰',
    title: '投资理财防护',
    description: '理性投资，避免投资理财诈骗。',
    steps: [
      '了解投资产品和风险',
      '选择正规金融机构',
      '不要相信高收益零风险',
      '分散投资降低风险',
      '保持理性投资心态'
    ]
  }
])

// 知识测试问题
const quizQuestions = ref([
  {
    id: 1,
    question: '接到声称是银行客服的电话，要求提供银行卡密码，正确的做法是？',
    options: [
      { id: 'a', text: '立即提供密码配合调查' },
      { id: 'b', text: '挂断电话，通过官方渠道核实' },
      { id: 'c', text: '要求对方提供更多证明' },
      { id: 'd', text: '先提供部分信息试探' }
    ],
    correct: 'b',
    explanation: '银行不会通过电话要求客户提供密码等敏感信息，应立即挂断并通过官方渠道核实。'
  },
  {
    id: 2,
    question: '在网络购物时，以下哪种支付方式最安全？',
    options: [
      { id: 'a', text: '直接银行转账' },
      { id: 'b', text: '货到付款' },
      { id: 'c', text: '第三方支付平台' },
      { id: 'd', text: '微信私人转账' }
    ],
    correct: 'c',
    explanation: '第三方支付平台如支付宝、微信支付等提供更好的安全保障和争议解决机制。'
  },
  {
    id: 3,
    question: '遇到承诺"零风险、高收益"的投资项目，应该如何处理？',
    options: [
      { id: 'a', text: '立即投资，机会难得' },
      { id: 'b', text: '先少量投资试试' },
      { id: 'c', text: '拒绝投资，这是典型的诈骗手法' },
      { id: 'd', text: '要求对方提供更多资料' }
    ],
    correct: 'c',
    explanation: '任何投资都存在风险，承诺零风险高收益的项目往往是诈骗陷阱。'
  }
])

// 最新更新
const latestUpdates = ref([
  {
    id: 1,
    date: '2024-01-15',
    title: '新增AI换脸诈骗识别指南',
    description: '详细介绍AI换脸技术在诈骗中的应用以及识别方法',
    type: '新增内容'
  },
  {
    id: 2,
    date: '2024-01-14',
    title: '更新电信诈骗最新手法',
    description: '根据最新案例更新电信诈骗的常见手法和防范措施',
    type: '内容更新'
  },
  {
    id: 3,
    date: '2024-01-13',
    title: '优化知识测试功能',
    description: '增加了更多测试题目，提升用户体验',
    type: '功能优化'
  }
])

// 计算属性
const filteredArticles = computed(() => {
  let filtered = articles.value
  
  if (selectedCategory.value !== 'all') {
    filtered = filtered.filter(article => article.categoryId === selectedCategory.value)
  }
  
  if (searchQuery.value) {
    filtered = filtered.filter(article => 
      article.title.includes(searchQuery.value) || 
      article.summary.includes(searchQuery.value) ||
      article.tags.some(tag => tag.includes(searchQuery.value))
    )
  }
  
  // 排序
  if (sortBy.value === 'popular') {
    filtered.sort((a, b) => b.readCount - a.readCount)
  } else if (sortBy.value === 'important') {
    const importanceOrder = { '高': 3, '中': 2, '低': 1 }
    filtered.sort((a, b) => importanceOrder[b.importance] - importanceOrder[a.importance])
  } else {
    filtered.sort((a, b) => new Date(b.date) - new Date(a.date))
  }
  
  return filtered
})

const currentQuestion = computed(() => {
  return quizQuestions.value[currentQuizIndex.value]
})

// 方法
const searchKnowledge = () => {
  console.log('搜索知识:', searchQuery.value)
}

const searchByTag = (tag) => {
  searchQuery.value = tag
  searchKnowledge()
}

const selectCategory = (category) => {
  selectedCategory.value = category.id
}

const getCategoryName = (categoryId) => {
  const category = categories.value.find(c => c.id === categoryId)
  return category ? category.name : '全部分类'
}

const readArticle = (article) => {
  console.log('阅读文章:', article.title)
}

const toggleFAQ = (faqId) => {
  const faq = faqList.value.find(f => f.id === faqId)
  if (faq) {
    faq.expanded = !faq.expanded
  }
}

const startQuiz = () => {
  quizStarted.value = true
  quizFinished.value = false
  currentQuizIndex.value = 0
  selectedAnswer.value = ''
  userAnswers.value = []
  quizScore.value = 0
}

const nextQuestion = () => {
  if (selectedAnswer.value) {
    userAnswers.value.push({
      questionId: currentQuestion.value.id,
      answer: selectedAnswer.value,
      correct: selectedAnswer.value === currentQuestion.value.correct
    })
    
    currentQuizIndex.value++
    selectedAnswer.value = ''
  }
}

const previousQuestion = () => {
  if (currentQuizIndex.value > 0) {
    currentQuizIndex.value--
    userAnswers.value.pop()
    selectedAnswer.value = ''
  }
}

const finishQuiz = () => {
  if (selectedAnswer.value) {
    userAnswers.value.push({
      questionId: currentQuestion.value.id,
      answer: selectedAnswer.value,
      correct: selectedAnswer.value === currentQuestion.value.correct
    })
  }
  
  // 计算分数
  const correctCount = userAnswers.value.filter(answer => answer.correct).length
  quizScore.value = Math.round((correctCount / quizQuestions.value.length) * 100)
  
  quizStarted.value = false
  quizFinished.value = true
}

const retakeQuiz = () => {
  startQuiz()
}

const getScoreAnalysis = (score) => {
  if (score >= 90) return '优秀！您的防诈骗知识掌握得很好。'
  if (score >= 70) return '良好！您具备基本的防诈骗知识，继续保持。'
  if (score >= 60) return '及格！建议您多学习相关知识，提高防范意识。'
  return '需要加强！请多关注防诈骗知识，提高自身防护能力。'
}
</script>

<style scoped>
.knowledge-base {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-header h1 {
  color: #1e3c72;
  margin-bottom: 10px;
}

.page-header p {
  color: #666;
  font-size: 16px;
}

.search-section {
  background: white;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.search-box {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.search-box input {
  flex: 1;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
}

.search-btn {
  background: #1e3c72;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.3s ease;
}

.search-btn:hover {
  background: #2a5298;
}

.quick-links {
  display: flex;
  align-items: center;
  gap: 10px;
}

.quick-links span {
  color: #666;
  font-size: 14px;
}

.tag-btn {
  background: #f0f0f0;
  color: #666;
  border: none;
  padding: 4px 8px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s ease;
}

.tag-btn:hover {
  background: #1e3c72;
  color: white;
}

.knowledge-categories {
  background: white;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.knowledge-categories h3 {
  color: #1e3c72;
  margin-bottom: 20px;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.category-card {
  background: #f8f9ff;
  border-radius: 8px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.category-card.active {
  border-color: #1e3c72;
  background: #e8f0ff;
}

.category-icon {
  font-size: 32px;
  margin-bottom: 15px;
}

.category-info h4 {
  color: #333;
  margin: 0 0 10px 0;
}

.category-info p {
  color: #666;
  margin: 0 0 15px 0;
  font-size: 14px;
}

.category-stats {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
}

.knowledge-content {
  background: white;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.content-header h3 {
  color: #1e3c72;
  margin: 0;
}

.content-filters select {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.articles-grid {
  display: grid;
  gap: 20px;
}

.article-card {
  background: #f8f9ff;
  border-radius: 8px;
  padding: 20px;
  border-left: 4px solid #1e3c72;
}

.article-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.article-meta {
  display: flex;
  gap: 10px;
}

.category-tag {
  background: #1e3c72;
  color: white;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 12px;
}

.importance {
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: bold;
}

.importance.高 {
  background: #ffebee;
  color: #f44336;
}

.importance.中 {
  background: #fff3e0;
  color: #ff9800;
}

.importance.低 {
  background: #e8f5e8;
  color: #4caf50;
}

.article-date {
  color: #666;
  font-size: 12px;
}

.article-content h4 {
  color: #333;
  margin: 0 0 10px 0;
}

.article-content p {
  color: #666;
  margin: 0 0 15px 0;
  font-size: 14px;
}

.article-tags {
  display: flex;
  gap: 5px;
  margin-bottom: 15px;
}

.tag {
  background: #e0e0e0;
  color: #666;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
}

.article-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.read-btn {
  background: #1e3c72;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.read-btn:hover {
  background: #2a5298;
}

.article-stats {
  display: flex;
  gap: 15px;
  font-size: 12px;
  color: #666;
}

.faq-section {
  background: white;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.faq-section h3 {
  color: #1e3c72;
  margin-bottom: 20px;
}

.faq-list {
  display: grid;
  gap: 10px;
}

.faq-item {
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  overflow: hidden;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: #f8f9ff;
  cursor: pointer;
  transition: background 0.3s ease;
}

.faq-question:hover {
  background: #e8f0ff;
}

.faq-question h4 {
  color: #333;
  margin: 0;
}

.toggle-icon {
  transition: transform 0.3s ease;
}

.toggle-icon.active {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 15px;
  background: white;
}

.faq-answer p {
  color: #666;
  margin: 0 0 15px 0;
}

.faq-tips h5 {
  color: #333;
  margin: 0 0 10px 0;
}

.faq-tips ul {
  margin: 0;
  padding-left: 20px;
}

.faq-tips li {
  color: #666;
  font-size: 14px;
  margin-bottom: 5px;
}

.protection-tips {
  background: white;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.protection-tips h3 {
  color: #1e3c72;
  margin-bottom: 20px;
}

.tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
}

.tip-card {
  background: #f8f9ff;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.tip-icon {
  font-size: 24px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.tip-content h4 {
  color: #333;
  margin: 0 0 10px 0;
}

.tip-content p {
  color: #666;
  margin: 0 0 15px 0;
  font-size: 14px;
}

.tip-steps h5 {
  color: #333;
  margin: 0 0 10px 0;
}

.tip-steps ol {
  margin: 0;
  padding-left: 20px;
}

.tip-steps li {
  color: #666;
  font-size: 14px;
  margin-bottom: 5px;
}

.knowledge-quiz {
  background: white;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.knowledge-quiz h3 {
  color: #1e3c72;
  margin-bottom: 20px;
}

.quiz-intro {
  text-align: center;
  padding: 20px;
}

.quiz-intro p {
  color: #666;
  margin: 0 0 20px 0;
}

.quiz-btn {
  background: #1e3c72;
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
}

.quiz-btn:hover {
  background: #2a5298;
  transform: translateY(-2px);
}

.quiz-content {
  max-width: 600px;
  margin: 0 auto;
}

.quiz-progress {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 30px;
}

.progress-bar {
  flex: 1;
  height: 8px;
  background: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: #1e3c72;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 14px;
  color: #666;
  font-weight: bold;
}

.quiz-question {
  background: #f8f9ff;
  border-radius: 8px;
  padding: 20px;
}

.quiz-question h4 {
  color: #333;
  margin: 0 0 20px 0;
}

.quiz-options {
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
}

.quiz-options label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: white;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.quiz-options label:hover {
  background: #e8f0ff;
}

.quiz-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.nav-btn {
  padding: 10px 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.nav-btn.primary {
  background: #1e3c72;
  color: white;
  border-color: #1e3c72;
}

.nav-btn.primary:hover:not(:disabled) {
  background: #2a5298;
}

.nav-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.quiz-result {
  text-align: center;
  padding: 20px;
}

.quiz-result h4 {
  color: #1e3c72;
  margin: 0 0 20px 0;
}

.result-score {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin-bottom: 20px;
}

.score-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e3c72, #2a5298);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.score-value {
  font-size: 32px;
  font-weight: bold;
}

.score-label {
  font-size: 14px;
  opacity: 0.8;
}

.score-analysis p {
  color: #666;
  margin: 0;
  font-size: 16px;
}

.retake-btn {
  background: #1e3c72;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.retake-btn:hover {
  background: #2a5298;
}

.latest-updates {
  background: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.latest-updates h3 {
  color: #1e3c72;
  margin-bottom: 20px;
}

.update-list {
  display: grid;
  gap: 15px;
}

.update-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 15px;
  background: #f8f9ff;
  border-radius: 8px;
}

.update-date {
  color: #666;
  font-size: 14px;
  font-weight: bold;
  min-width: 80px;
}

.update-content {
  flex: 1;
}

.update-content h4 {
  color: #333;
  margin: 0 0 5px 0;
}

.update-content p {
  color: #666;
  margin: 0 0 10px 0;
  font-size: 14px;
}

.update-type {
  background: #1e3c72;
  color: white;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 12px;
}

@media (max-width: 768px) {
  .knowledge-base {
    padding: 10px;
  }
  
  .category-grid {
    grid-template-columns: 1fr;
  }
  
  .tips-grid {
    grid-template-columns: 1fr;
  }
  
  .result-score {
    flex-direction: column;
    gap: 20px;
  }
  
  .quiz-actions {
    flex-direction: column;
  }
}
</style> 